<script setup>
import OptionOperator from '../components/OptionOperator/index.vue';
import JsonEditor from '../components/JsonEditor/index.vue';
import OptionEditor from '../components/OptionEditor/index.vue';

import {
	EDITOR_MODE_OPTION,
  EDITOR_MODE_CODE,
  EDITOR_MODE_OPTION_CODE
} from '../const'

import { ref, computed } from 'vue';

const mode = ref(null);

const handleModeChange = (val) => {
	mode.value = val
}

</script>

<template>
  <div class="code-generator__wrapper">
    <div class="code-generator__operate-wrapper">
      <OptionOperator @mode-change="handleModeChange"></OptionOperator>
    </div>
    <div class="code-generator__editor-wrapper">
      <div class="editor-wrapper__option">
        <OptionEditor></OptionEditor>
      </div>
      <div class="editor-wrapper__json">
        <JsonEditor></JsonEditor>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .code-generator__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    .code-generator__operate-wrapper {
      width: 100%;
      height: 48px;
      border-bottom: 1px solid #DCDFE6;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 10px;
    }

    .code-generator__editor-wrapper {
      width: 100%;
      flex: 1 0 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .editor-wrapper__option {
        flex: 1 0 0;
        height: 100%;
      }

      .editor-wrapper__json {
        flex: 1 0 0;
        height: 100%;
      }
    }
  }
</style>
